import React, { useState, useEffect } from 'react';
import './Member.less';
import Image from '../../static/images/BBD房子.png';
import dayjs from 'dayjs';
import axios from '../../utils/request';
import {
  Input,
  Space,
  Table,
  Radio,
  Button,
  Checkbox,
  Modal,
  Pagination,
  DatePicker,
} from 'antd';
import { Toast } from 'antd-mobile';
import type { ColumnsType } from 'antd/es/table';
import type { CheckboxValueType } from 'antd/es/checkbox/Group';

export default function index() {
  const [top, setTop] = useState('none');
  const [bottom, setBottom] = useState('bottomCenter');
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isModalOpen1, setIsModalOpen1] = useState(false);
  const [isModalOpen2, setIsModalOpen2] = useState(false);
  const [state, getState] = useState([]);
  const [zong, setzong] = useState(0);
  const [yeji, setyeji] = useState([]);
  const [search, setsearch] = useState('');
  const [pageSize, setpageSize] = useState(5);
  const [page, setpage] = useState(1);
  const [gai, setGai] = useState([]);

  const [values, setValues] = useState('回收');
  const [id, setId] = useState('');

  // 添加成员
  const [idd, setidd] = useState('');
  const [cname, setname] = useState('');
  const [sex, setsex] = useState('');
  const [shou, setshou] = useState('');
  const [rtime, setrtime] = useState('');
  const [sect, setsect] = useState([]);

  //成员编号
  const handleContent = (ev) => {
    console.log(ev);
    setidd(ev.target.value);
  };

  //成员姓名
  const handleName = (ev) => {
    console.log(ev);
    setname(ev.target.value);
  };

  //联系方式
  const handleShou = (ev) => {
    console.log(ev);
    setshou(ev.target.value);
  };

  //入职时间
  const handleTime = (ev) => {
    // console.log(ev);
    setrtime(ev.target.value);
    console.log(rtime);
  };

  const onChangeDates: DatePickerProps['onChange'] = (date, dateString) => {
    // handleTime;
    setrtime(dateString);
  };
  const onChangeDate: DatePickerProps['onChange'] = (date, dateString) => {
    console.log(date, dateString);
  };

  const onChangeRadios = (setsect: CheckboxValueType[]) => {
    console.log('checked = ', setsect);
  };
  const plainOptions = ['回收', '上门', '送货'];

  const onChangeRadio = (e: RadioChangeEvent) => {
    // console.log('radio checked', e.target.value);
    setsex(e.target.value);
    console.log(sex);
  };
  const Changesex = (ev) => {
    setGai({ ...gai, sex: ev.target.value });
  };
  const ChangeDate = (ev, dateString) => {
    setGai({ ...gai, rtime: dateString });
  };
  const ChangeZhi = (val) => {
    setGai({ ...gai, zhi: val.target.value });
  };

  const onChange = (e) => {
    setsearch(e.target.value);
    console.log(e.target.value);
  };

  const showModal = (item) => {
    console.log(item);
    setyeji(item.sect);
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const showModal2 = (item) => {
    setIsModalOpen2(true);
  };

  const handleOk2 = async () => {
    // console.log(1111111);
    let objs = { id: idd, cname, sex, shou, rtime, sect };
    console.log(objs);

    await axios
      .post('http://localhost:7980/cxy/Memberadd', { objs })
      .then((res) => {
        // console.log(res,'1111111111111111111');
        if (res.status == 200) {
          // console.log('添加成功');
          Toast.show({
            icon: 'success',
            content: '保存成功',
          });
        }
      });
    setIsModalOpen2(false);
  };

  const handleCancel2 = () => {
    setIsModalOpen2(false);
  };
  const showModal1 = (item) => {
    // console.log(item, 11111111);
    setGai(item);

    setId(item._id);

    setIsModalOpen1(true);
  };
  console.log(gai);

  const handleOk1 = async () => {
    // Editgets()
    // console.log(gai,11111111111);

    console.log(gai, 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa');

    const data = await axios.post('http://localhost:7980/cxy/editMember', {
      gai,
    });
    console.log(data);
    if (data.code === 200) {
      gets(page, pageSize, search);
      setIsModalOpen1(false);
    }
  };

  const handleCancel1 = () => {
    setIsModalOpen1(false);
  };

  const Clear = () => {
    gets(page, pageSize, '');
    setsearch('');
  };

  const hss = () => {
    gets(page, pageSize, search);
  };

  const gets = async (p: number, ps: number, k: string) => {
    setsearch(k);
    setpage(p);
    setpageSize(ps);
    let res;
    if (k) {
      res = await axios.get(
        `/cxy/getMember?kw=${search}&page=${p}&pageSize=${ps}`,
      );
    } else {
      res = await axios.get(`/cxy/getMember?page=${p}&pageSize=${ps}`);
    }
    console.log('ressssss', res);
    getState(res.data);
    setzong(res.all.length);
    console.log(res);
  };
  useEffect(() => {
    gets(page, pageSize, search);
  }, []);
  interface DataType {
    key: string;
    id: string;
    cname: string;
    sex: string;
    shou: string;
    rtime: string;
    zhi: string;
  }
  const lie = [
    {
      title: '月份',
      dataIndex: 'yue',
      key: 'yue',
    },
    {
      title: '上门次数',
      dataIndex: 'shang',
      key: 'shang',
    },
    {
      title: '回收次数',
      dataIndex: 'hui',
      key: 'hui',
    },
    {
      title: '送货次数',
      dataIndex: 'song',
      key: 'song',
    },
    {
      title: '收入（币）',
      dataIndex: 'bi',
      key: 'bi',
    },
  ];
  const Editgets = async () => {
    let res = await axios.post(`/cxy/editMember?id=${id}`);
    console.log(res);
  };
  const columns: ColumnsType<DataType> = [
    {
      title: '成员编号',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '姓名',
      dataIndex: 'cname',
      key: 'cname',
    },
    {
      title: '性别',
      dataIndex: 'sex',
      key: 'sex',
    },
    {
      title: '联系方式',
      dataIndex: 'shou',
      key: 'shou',
    },
    {
      title: '入职时间',
      dataIndex: 'rtime',
      key: 'rtime',
    },
    {
      title: '职能',
      dataIndex: 'zhi',
      key: 'zhi',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a>
            <span
              onClick={() => {
                showModal(record);
              }}
            >
              业绩查看
            </span>
          </a>
          <a>
            <span
              style={{ borderRadius: '5px' }}
              onClick={() => {
                showModal1(record);
              }}
            >
              修改
            </span>
          </a>
        </Space>
      ),
    },
  ];
  const fy = (a: any, n: any) => {
    console.log(a, n);
    gets(a, n, search);
  };
  return (
    <div className="quan1a">
      <div className="quan2a">
        <div className="header1a"></div>
        <div className="bottom1a" style={{ backgroundColor: '#000' }}></div>
        <div className="ding2a">
          <div className="headerding1a">
            <ul>
              <li
                style={{ fontSize: '2vh', fontWeight: '800', color: 'white' }}
              >
                成员管理
              </li>
              <li style={{ color: 'white' }}>
                <img
                  src={Image}
                  alt=""
                  style={{ width: '3vh', height: '3vh' }}
                />
              </li>
              <li style={{ color: 'white' }}>-</li>
              <li style={{ fontSize: '1.8vh', color: 'white' }}>系统管理</li>
              <li style={{ color: 'white' }}>-</li>
              <li style={{ fontSize: '1.8vh', color: 'white' }}>成员管理</li>
            </ul>
            <ul>
              <li
                style={{ fontSize: '20px', fontWeight: '800', color: 'white' }}
              >
                当前成员数：{zong}
              </li>
              <li>
                <Button style={{ borderRadius: '8px' }} onClick={showModal2}>
                  添加成员
                </Button>
              </li>
            </ul>
          </div>
          <div className="ding1a">
            <div className="titlea">
              <div className="Contenta" style={{ display: 'flex' }}>
                <ul>
                  <li style={{ paddingRight: '10vh', fontSize: '2vh' }}>
                    成员管理
                  </li>
                  <li style={{ paddingRight: '2vh' }}>
                    <span>成员姓名：</span>
                  </li>
                  <li>
                    <Input
                      placeholder="请输入成员姓名"
                      style={{ marginTop: '-0.5vh' }}
                      allowClear
                      value={search}
                      onChange={onChange}
                      onPressEnter={hss}
                      autoComplete="flase"
                    />
                  </li>
                  <li>
                    <Button
                      type="primary"
                      style={{ marginTop: '-0.5vh', marginLeft: '1vh' }}
                      onClick={Clear}
                    >
                      清除
                    </Button>
                  </li>
                </ul>
              </div>
            </div>
            <div className="contenta">
              <Table
                columns={columns}
                rowKey={(record) => record._id}
                dataSource={state}
                pagination={false}
                scroll={{ x: 1000 }}
              />
              <Pagination
                total={zong}
                responsive
                // showSizeChanger
                // showQuickJumper
                // showTotal={(total) => `Total ${zong} items`}
                style={{ marginLeft: '38%', marginTop: '5%' }}
                current={page}
                onChange={fy}
                defaultPageSize={pageSize}
              />
            </div>
            <Modal
              title="业绩查看"
              open={isModalOpen}
              onOk={handleOk}
              width={600}
              onCancel={handleCancel}
            >
              <div className="model1a">
                <div className="bana">
                  <ul>
                    <li>订单信息</li>
                    <li>
                      <Table
                        columns={lie}
                        pagination={{ position: [top, bottom] }}
                        dataSource={yeji}
                      />
                    </li>
                  </ul>
                </div>
              </div>
            </Modal>

            <Modal
              title="编辑成员"
              open={isModalOpen1}
              onOk={(e) => handleOk1(e)}
              onCancel={handleCancel1}
              width={800}
            >
              <div className="model1a">
                <div className="bana">
                  <ul style={{ display: 'flex' }}>
                    <li style={{ marginRight: '2vh', fontWeight: '1000' }}>
                      成员编号：
                    </li>
                    <li>
                      <Input
                        placeholder="请输入成员姓名"
                        allowClear
                        value={gai['id']}
                        onChange={(ev) =>
                          setGai({ ...gai, id: ev.target.value })
                        }
                        style={{ width: '20vh', marginTop: '-1vh' }}
                      />
                    </li>
                  </ul>
                  <ul style={{ display: 'flex' }}>
                    <li style={{ marginRight: '2vh', fontWeight: '1000' }}>
                      成员姓名：
                    </li>
                    <li>
                      <Input
                        placeholder="请输入成员姓名"
                        allowClear
                        value={gai['cname']}
                        onChange={(ev) =>
                          setGai({ ...gai, cname: ev.target.value })
                        }
                        style={{ width: '20vh', marginTop: '-1vh' }}
                      />
                    </li>
                  </ul>
                </div>
                <div className="ba">
                  <ul style={{ display: 'flex', marginRight: '8.5vh' }}>
                    <li style={{ marginRight: '5vh', fontWeight: '1000' }}>
                      性别：
                    </li>
                    <li>
                      <Radio.Group onChange={Changesex} value={gai['sex']}>
                        <Radio value="男">男</Radio>
                        <Radio value="女">女</Radio>
                      </Radio.Group>
                    </li>
                  </ul>
                  <ul style={{ display: 'flex' }}>
                    <li style={{ marginRight: '2vh', fontWeight: '1000' }}>
                      联系方式：
                    </li>
                    <li>
                      <Input
                        placeholder="请输入成员姓名"
                        allowClear
                        value={gai['shou']}
                        onChange={(ev) =>
                          setGai({ ...gai, shou: ev.target.value })
                        }
                        style={{ width: '20vh', marginTop: '-1vh' }}
                      />
                    </li>
                  </ul>
                </div>
                <div className="time">
                  <ul>
                    <li style={{ marginRight: '2vh', fontWeight: '1000' }}>
                      入职时间：
                    </li>
                    <li>
                      <DatePicker
                        defaultValue={dayjs(gai['rtime'])}
                        onChange={ChangeDate}
                      />
                    </li>
                  </ul>
                </div>
                <div className="zhi">
                  <ul>
                    <li style={{ marginRight: '2vh', fontWeight: '1000' }}>
                      职能选择：
                    </li>
                    <li>
                      <Radio.Group
                        onChange={ChangeZhi}
                        defaultValue={gai['zhi']}
                      >
                        <Radio value="回收">回收</Radio>
                        <Radio value="上门">上门</Radio>
                        <Radio value="送货">送货</Radio>
                      </Radio.Group>
                    </li>
                  </ul>
                </div>
              </div>
            </Modal>
            <Modal
              title="添加成员"
              open={isModalOpen2}
              onOk={handleOk2}
              onCancel={handleCancel2}
              width={800}
            >
              <div className="model1a">
                <div className="bana">
                  <ul style={{ display: 'flex' }}>
                    <li style={{ marginRight: '2vh', fontWeight: '1000' }}>
                      成员编号：
                    </li>
                    <li>
                      <Input
                        placeholder="请输入成员编号"
                        allowClear
                        style={{ width: '20vh', marginTop: '-1vh' }}
                        onChange={handleContent}
                      />
                    </li>
                  </ul>
                  <ul style={{ display: 'flex' }}>
                    <li style={{ marginRight: '2vh', fontWeight: '1000' }}>
                      成员姓名：
                    </li>
                    <li>
                      <Input
                        placeholder="请输入成员姓名"
                        allowClear
                        style={{ width: '20vh', marginTop: '-1vh' }}
                        onChange={handleName}
                      />
                    </li>
                  </ul>
                </div>
                <div className="ba">
                  <ul style={{ display: 'flex', marginRight: '8.5vh' }}>
                    <li style={{ marginRight: '5vh', fontWeight: '1000' }}>
                      性别：
                    </li>
                    <li>
                      <Radio.Group onChange={onChangeRadio} value={sex}>
                        <Radio value={'男'}>男</Radio>
                        <Radio value={'女'}>女</Radio>
                      </Radio.Group>
                    </li>
                  </ul>
                  <ul style={{ display: 'flex' }}>
                    <li style={{ marginRight: '2vh', fontWeight: '1000' }}>
                      联系方式：
                    </li>
                    <li>
                      <Input
                        placeholder="请输入联系方式"
                        allowClear
                        style={{ width: '20vh', marginTop: '-1vh' }}
                        onChange={handleShou}
                      />
                    </li>
                  </ul>
                </div>
                <div className="time">
                  <ul>
                    <li style={{ marginRight: '2vh', fontWeight: '1000' }}>
                      入职时间：
                    </li>
                    <li>
                      <DatePicker onChange={onChangeDates} />
                    </li>
                  </ul>
                </div>
                <div className="zhi">
                  <ul>
                    <li style={{ marginRight: '2vh', fontWeight: '1000' }}>
                      职能选择：
                    </li>
                    <li>
                      <Checkbox.Group
                        options={plainOptions}
                        onChange={onChangeRadios}
                      />
                    </li>
                  </ul>
                </div>
              </div>
            </Modal>
          </div>
        </div>
      </div>
    </div>

    //

    //
  );
}
